<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/observer.js"></script>
    <script src="./src/compile.js"></script>
    <script src="./src/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <p>姓名:{{person.name}}</p>
        <p>年龄:{{person.age}}</p>
        <p>学校名称:{{person.school.name}}</p>
        <p>建校时间:{{person.school.foundedDate}}</p>
        <p v-html="person.introduction"></p>
        <p v-text="person.name"></p>
        <input type="text"  v-model="person.name">
        <button name="btn1" @click="clickFn">点我</button>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '<h3>hello miniVue</h3>',
            person: {
                name:'Xin Liu',
                age:21,
                school:{
                    name:'西北大学',
                    foundedDate:'1902'
                },
                introduction:'<h3>高级前端开发工程师、架构师</h3>'
            }
        },
        methods:{
            clickFn(){
                alert(this.$data.msg)
            }
        }
    })
</script>

</body>
</html>
